<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>开心记账本</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
	<style>
    .jumbotron{
        background: #ffda44;
    }

    .go-home{
        position: fixed;
        bottom: 5%;
        right: 1%;
        z-index: 888;
        border-radius: 40px;    
        opacity: 0.9;
    }

  </style>
</head>
<body>

<div id="app">
    <!-- 头部 -->
    <div class="container">
        <div class="row" style="background-color: #ffda44;height: 150px;padding: 43px 0;">
            <div class="col-sm-4" style="text-align: center;padding-top: 10px;">
                <div style="font-size: 2.3em;">
                    2021年
                </div>
            </div>

            <div class="col-sm-4" style="text-align: center;">
                <div style="font-size: 1.3em;">
                    收入
                </div>
                <div style="font-size: 2.2em;">
                    3000元
                </div>
            </div>

            <div class="col-sm-4" style="text-align: center;">
                <div style="font-size: 1.3em;">
                    支出
                </div>
                <div style="font-size: 2.2em;">
                    5000元
                </div>
            </div>
        </div>
    </div>

    <br/>
    <!-- 内容 -->
    <div class="container">
        <!-- 时间+当天总计 -->
        <div>
            <div class="row" style="background-color: #ffffff;font-size: 1.5em;color: #a3a3a3;">
                <div class="col-sm-5">
                    <span>10月15日</span>
                </div>
            </div>
            <div class="row" style="background-color: ffffff;font-size: 1.5em;margin-top: 15px;">
                <div class="col-sm-5">
                    <img src="../image/shouru.png" style="width:60px;height: 60px;"/>
                    <span style="font-size: 1.3em;padding-left: 20px;">终于发工资啦</span>
                </div>
                <div class="col-sm-7" style="text-align: right;">
                    <span style="font-size: 2em;">9500.00</span>
                </div>
            </div>
            <br/>
            <div class="row" style="background-color: ffffff;font-size: 1.5em;margin-top: 15px;">
                <div class="col-sm-5">
                    <img src="../image/shouru.png" style="width:60px;height: 60px;"/>
                    <span style="font-size: 1.3em;padding-left: 20px;">路上捡钱</span>
                </div>
                <div class="col-sm-7" style="text-align: right;">
                    <span style="font-size: 2em;">200.00</span>
                </div>
            </div>
            <br/>
            <div class="row" style="background-color: ffffff;font-size: 1.5em;margin-top: 15px;">
                <div class="col-sm-5">
                    <img src="../image/zhichu2.png" style="width:60px;height: 60px;"/>
                    <span style="font-size: 1.3em;padding-left: 20px;">吃饭</span>
                </div>
                <div class="col-sm-7" style="text-align: right;">
                    <span style="font-size: 2em;">-21.50</span>
                </div>
            </div>
        </div>
        <hr>
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加记账
                    </h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                        <label for="name">账目类型</label>
                        <select class="form-control" id="accountType">
                            <option value="2">支出</option>
                            <option value="1">收入</option>
                        </select>
                        </div>

                        <div class="form-group">
                        <label for="name">金额</label>
                        <input type="text" id="accountNum" maxlength="11" placeholder="请输入金额" class="form-control quantity-count"/>
                        </div>

                        <div class="form-group">
                        <label for="name">描述</label>
                        <input type="text" id="accountDesc" maxlength="15" placeholder="请输入描述" class="form-control quantity-count"/>
                        </div>
                        <button type="button" class="btn btn-primary" @click="submitData()">提交</button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>

<view class="go-home">
    <img src="../image/add.png" style="width: 120px;height: 120px;" data-toggle="modal" data-target="#myModal"/>
</view>

</body>
</html>